<template>
	<LoginHeader></LoginHeader>
	<div class="wrapper">
		<div class="register_wrap">
			<div class="logo_wrap">
				<img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" style="height: 45px; width: 134px;">
				<div class="logo"></div>
			</div>
			<div class="infobox">
				<div class="register_form">
					<div class="register_info">
						<form action="">
							<van-cell-group>
								<van-field v-model="phone" required clearable label="手机号" icon="question-o" placeholder="请输入手机号"
									bind:click-icon="onClickIcon" />
								<van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
								<van-field v-model="repassword" type="password" label="重复密码" placeholder="请重复密码" required />
								<van-cell-group class="verify_info">
									<van-field class="verify_code" v-model="code" label="短信验证码" placeholder="请输入短信验证码" required />
									<van-button class="verify_code_btn" @click="getCode" :disabled="time > 0">{{ time > 0 ? `${time}秒后重新发送` : '获取验证码' }}</van-button>
								</van-cell-group>
							</van-cell-group>
						</form>
						<div class="confirm_div">
							<div class="controls flex">
								<van-checkbox v-model="isAgree" @change="changeCheck" direction="horizontal" name="1" shape="square">
								</van-checkbox>
								<div class="confirm_code">同意<a href="https://reg.163.com/agreement_mobile_wap.shtml?v=20171127">《服务条款》</a>
									和<a href="https://m.you.163.com/help/new#/37/73">《隐私政策》</a>
									和<a href="https://m.you.163.com/help/new#/37/73">《网易严选服务协议》</a>
								</div>
							</div>
							<van-button type="danger" size="large" @click="registerHandle">注册</van-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import LoginHeader from '../../components/LoginHeader/index.vue'
import registerApi, { type formDataModel } from '@/api/register';
import { ref } from 'vue';
import { showFailToast, showSuccessToast } from 'vant';
import router from '@/router';

const phone = ref('')
const password = ref('')
const code = ref('')
const repassword = ref('')
const isAgree = ref(true)

const time = ref(0)
let timer: any = -1

// 事件的回调
const getCode = () => {
	time.value = 10
	timer = setInterval(() => {
		if (time.value <= 0) {
			clearInterval(timer)
		}
		time.value--
	}, 1000)
	getCodeReq()
}

const registerHandle = () => {
	if (
		!(phone.value &&
			password.value &&
			code.value &&
			repassword.value === password.value &&
			isAgree.value)
	) {
		showFailToast('输入有误')
		return
	}

	register()
}
const changeCheck = () => {
	console.log(isAgree.value);

}

// 功能函数
const getCodeReq = async () => {
	try {
		const res = await registerApi.reqCode(phone.value)
		code.value = res
	} catch (error) {
		console.error(error);
	}
}

const register = async () => {
	try {
		await registerApi.register({
			phone: phone.value,
			password: password.value,
			code: code.value,
		})
		showSuccessToast('注册成功')
		router.push('/login')
	} catch (error) {
		console.log(error);

	}
}

</script>

<style scoped lang="less">
.wrapper {
	background-color: #fff;
	padding-top: 20px;
	height: 100%;
	width: 100%;

	.register_wrap {
		width: 375px;
		height: 435px;
		display: block;

		.logo_wrap {
			width: 375px;
			height: 45px;
			margin: 28px 0 0;
			text-align: center;
		}

		.infobox {
			padding: 50px 20px 20px 20px;

			.register_form {
				.register_info {
					.verify_info {
						display: flex;

						.verify_code_btn {
							white-space: nowrap;
							text-align: center;
							margin: auto;
							display: block;
							width: 82px;
							height: 26px;
							font-size: 14px;
						}
					}

					.confirm_div {
						margin: auto;
						padding: 20px 0 70px;

						.controls {
							margin-bottom: 20px;

							.confirm_code {
								display: flex;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
}
</style>